﻿@page "/pivot-table/toolbar"

@using Syncfusion.Blazor.PivotView
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
    <p> This sample demonstrates the toolbar options of the pivot table. The options include report manipulations like create, save, save as, rename and delete, show or hide subtotals and grand totals, conditional formatting, number formatting and exporting in the pivot table and pivot chart.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, users can generate a report at runtime, as well as save and load them. Save and load operations
    are performed in local variable using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_SaveReport'>SaveReport</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_LoadReport'>LoadReport</a></code> events.
    Users can change to either pivot table or pivot chart using the toolbar options. To enable toolbar, set the <code>ShowToolbar</code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html'>SfPivotView</a></code> class to <b>true</b>, The toolbar options that are available are:</p>
 <table>
        <tr>
            <td style='vertical-align: top;padding: 10px 0;width:230px'><code>Create new report:</code>
            </td><td>Allows user to create new reports at runtime.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Rename report:</code></td>
            <td>Allows user to change current report name dynamically through UI.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Remove report:</code></td>
            <td>Allows user to remove current report from the report collection at runtime.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Save as option:</code></td>
            <td>Allows user to save report locally in browser memory.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Report list:</code></td>
            <td>Allows user to swap between the reports within the report collection.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Pivot Table:</code></td>
            <td>Allows user to view data in cross-tabulation format.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Pivot Chart and its types:</code></td>
            <td>Allows user to view data in graphical format. The chart types include column, bar, line, area, etc. It also has options for showing and hiding legends and displaying chart series of different measures on single and multiple axes.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Export:</code></td>
            <td>Provides options to save data in PDF, Excel, and CSV document types.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'>
                <code>Hide subtotals and grand totals:</code>
            </td>
            <td>Allows user to hide grand totals and subtotals (based on fields) in row and column.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Conditional formatting:</code></td>
            <td>Allows user to customize cells based on certain conditions.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Number formatting:</code></td>
            <td>Allows user to dynamically apply number formatting to value fields.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Field List:</code></td>
            <td>Provides option to alter the report dynamically through UI.</td>
        </tr>
    </table>
    <p>To define toolbar options, create a list with necessary <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewModel-1.html#Syncfusion_Blazor_PivotView_PivotViewModel_1_Toolbar'>ToolbarItems</a></code> enumeration values and add it to the <code>Toolbar</code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html'>SfPivotView</a></code> class.</p>
<p>More information on the toolbar feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/tool-bar/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView @ref="@Pivot" TValue="PivotProductDetails" Height="400" Width="100%" ShowFieldList=true ShowToolbar=true Toolbar="@PivotToolbar" AllowNumberFormatting=true AllowConditionalFormatting=true AllowPdfExport=true AllowExcelExport=true EnableValueSorting=true ShowTooltip=false>
            <PivotViewDisplayOption Primary="Primary.Table" View="View.Both"></PivotViewDisplayOption>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true ShowGrandTotals=true ShowSubTotals=true>
                <PivotViewColumns>
                    <PivotViewColumn Name="Year"></PivotViewColumn>
                    <PivotViewColumn Name="Order_Source" Caption="Order Source"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Country"></PivotViewRow>
                    <PivotViewRow Name="Products"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="In_Stock" Caption="In Stock"></PivotViewValue>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFilters>
                    <PivotViewFilter Name="Product_Categories" Caption="Product Categories"></PivotViewFilter>
                </PivotViewFilters>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
            <PivotChartSettings Title="Sales Analysis">
                <PivotChartPrimaryYAxis>
                    <PivotChartPrimaryYAxisBorder Width="0"></PivotChartPrimaryYAxisBorder>
                </PivotChartPrimaryYAxis>
            </PivotChartSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
            <PivotViewEvents TValue="PivotProductDetails" RenameReport="RenameReport" RemoveReport="RemoveReport" SaveReport="SaveReport" LoadReport="LoadReport" FetchReport="FetchReport"></PivotViewEvents>
        </SfPivotView>
    </div>
</div>

<style>
    .e-pivotview {
        min-height: 200px;
    }

    html, body {
        height: 100%;
    }
</style>

@code{
    SfPivotView<PivotProductDetails> Pivot;
    public List<ToolbarItems> PivotToolbar = new List<ToolbarItems> {
        ToolbarItems.New,
        ToolbarItems.Save,
        ToolbarItems.SaveAs,
        ToolbarItems.Rename,
        ToolbarItems.Remove,
        ToolbarItems.Load,
        ToolbarItems.Grid,
        ToolbarItems.Chart,
        ToolbarItems.Export,
        ToolbarItems.SubTotal,
        ToolbarItems.GrandTotal,
        ToolbarItems.Formatting,
        ToolbarItems.FieldList
    };

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }

    public string InitReport { get; set; }
    public string[] Name { get; set; }
    public List<string> Report = new List<string>();
    public List<string> ReportName = new List<string>();
    public void SaveReport(SaveReportArgs args)
    {
        int i = 0;
        bool IsSaved = false;
        for (i = 0; i < this.ReportName.Count; i++)
        {
            if (this.ReportName[i] == args.ReportName)
            {
                this.Report[i] = args.Report;
                IsSaved = true;
            }
        }
        if (args.Report != null && !(IsSaved))
        {
            this.Report.Add(args.Report);
            this.ReportName.Add(args.ReportName);
        }
    }
    public void FetchReport(FetchReportArgs args)
    {
        args.ReportName = ReportName.ToArray();

    }
    public async Task LoadReport(LoadReportArgs args)
    {
        int i = 0;
        int j = 0;
        for (i = 0; i < ReportName.Count; i++)
        {
            if (ReportName[i] == args.ReportName)
            {
                j = i;
            }
        }
        await this.Pivot.LoadPersistDataAsync(Report[j]);
    }
    public async Task RemoveReport(RemoveReportArgs args)
    {
        int i = 0;
        for (i = 0; i < ReportName.Count; i++)
        {
            if (ReportName[i] == args.ReportName)
            {
                ReportName.RemoveAt(i);
                Report.RemoveAt(i);
                break;
            }
        }
        if (Report.Count > 0)
        {
            await this.Pivot.LoadPersistDataAsync(Report[0]);
        }
    }
    public void RenameReport(RenameReportArgs args)
    {
        if (args.IsReportExists) {
            int j = 0;
            for (j = 0; j < ReportName.Count; j++)
            {
                if (ReportName[j] == args.Rename)
                {
                    ReportName.RemoveAt(j);
                    Report.RemoveAt(j);
                    break;
                }
            }
        }
        int i = 0;
        for (i = 0; i <= (ReportName.Count - 1); i++)
        {
            if (ReportName[i] == args.ReportName)
            {
                ReportName.RemoveAt(i);
                ReportName.Add(args.Rename);
            }
        }

    }
}